import React, { useEffect, useState } from "react";
import styled, { keyframes } from "styled-components";
import { useNavigate } from "react-router-dom";
import api from "../../api/user";
import { useSelector, useDispatch } from "react-redux";
import { useTokenSlice, setToken } from "../../store/Token/index";
import { useUserSlice, setInfo } from "../../store/User/index";
// 进场动画
const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  animation: ${fadeIn} 0.6s ease forwards;
  padding: 20px;
`;

const Card = styled.div`
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 15px;
  padding: 30px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  animation: ${fadeIn} 1s ease 0.2s forwards;
`;

const Title = styled.h2`
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  font-weight: 600;
`;

const Input = styled.input`
  width: 100%;
  padding: 12px 15px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  &:focus {
    outline: none;
    border-color: #a777e3;
    box-shadow: 0 0 5px rgba(167, 119, 227, 0.5);
  }
`;

const Button = styled.button`
  width: 100%;
  padding: 12px;
  margin-top: 20px;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  &:hover {
    background: linear-gradient(135deg, #a777e3, #6e8efb);
  }
`;

const Footer = styled.div`
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: #666;
`;

const StyledLink = styled.span`
  color: #a777e3;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
`;

const Login: React.FC = () => {
  const [username, setUsername] = useState("chenguoqing");
  const [password, setPassword] = useState("");
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const login = async () => {
    const res = await api.login({ username, password });
    if (res?.access_token) {
      dispatch(setToken(res.access_token));
      const info = await api.getUserInfo(res.userId);
      /**
       * 保存用户信息
       */

      dispatch(setInfo(info));
      navigate("/home");
    }
  };
  const handleLogin = () => {
    // 登录逻辑
    login();
  };

  const handleRegister = () => {
    navigate("/register");
  };

  useEffect(() => {}, []);
  return (
    <Container>
      <Card>
        <Title>登录</Title>
        <Input
          type="text"
          placeholder="用户名"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
        <Input
          type="password"
          placeholder="密码"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <Button onClick={handleLogin}>登录</Button>
        <Footer>
          还没有账号？<StyledLink onClick={handleRegister}>注册</StyledLink>
        </Footer>
      </Card>
    </Container>
  );
};

export default Login;
